<template>
    <div class="sale-container">
        <!-- 顶部菜单 -->
        <div class="menu-header">
            <el-menu :default-active="activeMenu" class="menu-horizontal" mode="horizontal" @select="handleMenuSelect">
                <el-menu-item index="customer">
                    <el-icon><i-ep-user /></el-icon>
                    <span>客户信息</span>
                </el-menu-item>
                <!-- <el-menu-item index="quotation">
          <el-icon><i-ep-document /></el-icon>
          <span>申请报价</span>
        </el-menu-item>
        <el-menu-item index="order">
          <el-icon><i-ep-shopping-cart /></el-icon>
          <span>销售合同</span>
        </el-menu-item>
        <el-menu-item index="delivery">
          <el-icon><i-ep-van /></el-icon>
          <span>销售退货</span>
        </el-menu-item> -->
            </el-menu>
        </div>

        <!-- 内容区域 -->
        <div class="content-area">
            <CustomerInfoView v-if="activeMenu === 'customer'" />
            <div v-else-if="activeMenu === 'quotation'" class="placeholder">
                申请报价（开发中）
            </div>
            <div v-else-if="activeMenu === 'order'" class="placeholder">销售合同（开发中）</div>
            <div v-else-if="activeMenu === 'delivery'" class="placeholder">
                销售退货（开发中）
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import CustomerInfoView from "../Sale/customer/CustomerInfoView.vue"

// 当前激活的菜单项
const activeMenu = ref("customer")

// 菜单选择处理
const handleMenuSelect = (index: string) => {
    activeMenu.value = index
}
</script>

<style scoped>
.sale-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #f5f7fa;
}

.menu-header {
    background-color: #fff;
    border-bottom: 1px solid #dcdfe6;
}

.menu-horizontal {
    justify-content: center;
    border-bottom: none;
}

.content-area {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 20px;
    color: #909399;
}
</style>
